<script setup>

</script>

<template>
  <view style="background:rgba(0,0,0,0.05);height:100vh;">
    <view class="header">
      <view>订单详细</view>
    </view>

    <view class="top">
        <view class="top-1">
          <image class="topImage" src="/src/assets/shao.png">
          </image>
        <view class="topTitle">已完成</view>
        </view>
      <view class="p">
        订单已完成
      </view>
    </view>

    <view class="userInfo">
      <view class="userInfo-top">
        <image class="userInfo-image" src="/src/assets/dingwei.png"></image>
        <view class="userInfo-title">王老二 <text class="phone">16688556532</text></view>
      </view>
      <view class="address">北京市昌平区北京科技职业学院</view>
    </view>

    <view class="shopBox">
      <view class="order-content">
        <image class="order-content-image" src="/static/logo.png"></image>
        <view class="order-title">
          <view class="h1">非常好喝的咖啡</view>
          <view class="p">克数：5克</view>
          <view class="price" style="color:red;">￥54.3</view>
        </view>
      </view>
    </view>

    <view class="priceBox">
      <view class="total">
        <view class="total-title">合计金额</view>
        <view style="color:red">￥16.0</view>
      </view>

      <view class="total">
        <view class="total-title-1">商品价格</view>
        <view class="total-title-1">￥16.0</view>
      </view>

      <view class="total">
        <view class="total-title-1">运费</view>
        <view class="total-title-1">免运费</view>
      </view>
    </view>

    <view class="bottom">
      <view class="bottom-title">
        <view>订单编号：130000000000</view>
        <view>物流单号：3655658965755526</view>
        <view>下单时间：2020.09.06 21:53</view>
      </view>
    </view>

    <view class="btn">
      <button class="button-1">申请退货退款</button>
      <button class="button-2">评论</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header{
  width:750rpx;
  height:136rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top{
  background:#ff4344;
  width:750rpx;
  height:169rpx;
  overflow: hidden;
  color:#fff;
  .top-1{
    display:flex;
    margin-top:45rpx;
    margin-left:35rpx;
    .topImage{
      width:28rpx;
      height:30rpx;
    }
    .topTitle{
      font-size:29rpx;
      margin-left:24rpx;
      //.phone{
      //  color: rgba(0, 0, 0, 0.3);
      //  font-size:19rpx;
      //}
    }
  }
  .p{
    margin-left:86rpx;
    margin-top:19rpx;
  }
}

.userInfo{
  width:750rpx;
  height:156rpx;
  background: #fff;
  margin-top:16rpx;
  overflow: hidden;
  .userInfo-top{
    margin-left:34rpx;
    margin-top:39rpx;
    font-size:29rpx;
    display:flex;
    .userInfo-image{
      width:30rpx;
      height:34rpx;
      margin-right:20rpx;
    }
    .userInfo-title{
      font-size:29rpx;
      .phone{
        color: rgba(0, 0, 0, 0.46);
        font-size:19rpx;
        margin-left:13rpx;
      }
    }
  }
  .address{
    font-size:23rpx;
    margin-left:82rpx;
    margin-top:25rpx;
    color: rgba(0, 0, 0, 0.46);
  }
}
.shopBox{
  width:750rpx;
  margin-top:16rpx;
  background:#fff;
  .order-content{
    width:678rpx;
    display:flex;
    margin:auto;
    height:221rpx;
    align-items: center;
    .order-content-image{
      width:161rpx;
      height:161rpx;
      margin-right:20rpx;

    }
    .order-title{
      width:490rpx;
      .h1{
        font-size:31rpx;
      }
      .p{
        font-size:19rpx;
        color: rgba(0, 0, 0, 0.48);
      }
      .price{
        font-size:19rpx;
        margin-top:57rpx;
      }
    }

  }
}
.priceBox{
  width:750rpx;
  background: #fff;
  margin-top:16rpx;
  .total{
    display:flex;
    justify-content: space-between;
    width:690rpx;
    margin:auto;
    height:85rpx;
    align-items: center;
    border-bottom:1px solid rgba(0, 0, 0, 0.14);
  }
  .total-title-1{
    color: rgba(0, 0, 0, 0.44);
  }
}
.bottom{
  background:#fff;
  width:750rpx;
  height:246rpx;
  overflow: hidden;
  .bottom-title{
    margin-top:38rpx;
    margin-left:30rpx;
    line-height: 58rpx;
    font-size:24rpx;
    color:#333333;
  }
}
.btn{
  width:750rpx;
  height:102rpx;
  display:flex;
  align-items: center;
  background: #fff;
  border:1px solid rgba(0, 0, 0, 0.05);
  .button-1,.button-2{
    font-size:23rpx;
    height:52rpx;
    text-align:center;
    line-height: 52rpx;
    border-radius:26rpx;
    background: red;
    color:#fff;
  }
  .button-1{
    width:236rpx;
    margin-left:337rpx;
  }
  .button-2{
    margin-left:28rpx;
    width:146rpx;
  }
}
</style>